<template>
  <transition>
    <div class="app-carmodel-search">
      <section class="app-main">
        <div class="module-form">
          <!--<div class="module-show-img">-->
            <!--<img src="../../../static/img/img-carno.jpg"/>-->
          <!--</div>-->
          <div class="input-content">
            <mt-field :class="{active:current=='1'}" class="input-car-no input-block" label="" placeholder="请输入车牌号或自编号" v-model="carNo" @keyup.enter.native="handleSearch" @focus.native.capture="inputFocus('1')" @blur.native.capture="handleBlurCar">
              <span class="car-no-area" @click="popupSelectCity=true">{{curCityTitle}}</span>
              <span class="iconfont icon-xiangjizhuanhuan"></span>
              <ul class="module-select-list" v-if="selectCar.length<=20 && isShowCarList">
                <li class="select-item" v-for="item in selectCar"　@click="handleSelectCar(item)">{{item.carNo}}<span>{{item.innerNo}}</span></li>
              </ul>

            </mt-field>
            <mt-field :class="{active:current=='2'}" class="input-block" label="" placeholder="请输入车架号" v-model="carVin" @keyup.enter.native="handleSearch" @focus.native.capture="inputFocus('2')" @blur.native.capture="handleBlurVin">
              <span class="iconfont icon-tiaomacaiji" style="font-size: 20px;color: #666;padding-left: 4px;"></span>
              <ul class="module-select-list module-select-list-vin" v-if="selectCarVin.length<=20 && isShowVinList">
                <li class="select-item" v-for="item in selectCarVin"　@click="handleSelectCar(item)">{{item.vin}}</li>
              </ul>
            </mt-field>
          </div>
          <div class="button-content" style="padding:10px 0 0;">
            <mt-button type="danger" @click="handleSearch">立即查询</mt-button>
            <div class="none-tips"><a href="/report-center">按品牌查询</a></div>
          </div>
        </div>
      </section>
      <mt-popup
        class="modal-car-city"
        v-model="popupSelectCity"
        position="bottom">
        <CarnoCity @popupClose="popupSelectCity=false" @selectCity="handleSelectCity"></CarnoCity>
      </mt-popup>
    </div>
  </transition>
</template>

<script>
  import {getVehicleList} from '@/api/car'
  import { Field,Button,Toast,Popup } from 'mint-ui';
  import CarnoCity from '@/components/common/carno-city.vue';
  export default {
    components:{
      Field,
      CarnoCity,
    },
    data () {
      return {
        carNo:'',
        current:'',
        isRemember:'',
        carVin:'',
        userpwd:'',
        popupSelectCity:false,
        isShowCarList:false,
        isShowVinList:false,
        curCityTitle:'粤',
        carList:[],
      }
    },
    beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg_car");
    },
    computed:{
      /**联想搜索车辆档案**/
      selectCar(){
        var carNo=(this.carNo).toUpperCase();
        return this.carList.filter((d) => {

              if (d.carNo.indexOf(carNo) > -1 || d.innerNo.indexOf(carNo) > -1){
                return d;
              }
        })
      },
      /**Vin联想搜索车辆档案**/
      selectCarVin(){
        var carVin=(this.carVin).toUpperCase();
        return this.carList.filter((d) => {
            if (d.vin.indexOf(carVin) > -1){
            return d;
        }
      })
      },
    },
    mounted(){
      document.getElementsByTagName("body")[0].className="add_bg_car";

      /**获取车辆档案**/
      const postData={
        'page':1,
        'rows':100
      }
      getVehicleList(postData).then((res)=>{
        this.carList=res.rows;
    })
    },
    methods:{

      /**选择车辆查询**/
      handleSelectCar(item){
        this.curCityTitle=item.carNo.substr(0,1);
        this.carNo=item.carNo.substr(1,(item.carNo.length));
        this.postData();
      },
      handleBlurCar(){
        this.isShowCarList=false;
      },
      handleBlurVin(){
        this.isShowVinList=false;
      },

      inputFocus(index){
        this.current=index;
        if(index==1){
          this.isShowCarList=true;
        }else if(index==2){
          this.isShowVinList=true;
        }
      },
      handleSearch(){

        if(this.carNo=='' && this.carVin==''){

          Toast({
            message: '请输入正确的车牌号',
            position: 'middle',
            duration: 1000
          });
          return false;
        }

        if(this.carNo!=''){
          var reg = /[\u4e00-\u9fa5]/g;
          if(reg.test(this.carNo)){
            Toast({
              message: '请输入正确的车牌号',
              position: 'middle',
              duration: 1000
            });
            return false;
          }

          if(this.carNo.length<5 || this.carNo.length>=8){

            Toast({
              message: '请输入正确的车牌号',
              position: 'middle',
              duration: 1000
            });
            return false;

          }
        }else{
          if(this.carVin.length!=17){
            Toast({
              message: '请输入17位车架号',
              position: 'middle',
              duration: 1000
            });
            return false;
          }
        }
        this.postData();
      },

      /**提交数据查询**/
      postData(){
        var params = new URLSearchParams();
        if(this.carNo!=''){
          params.append('form.carNo',this.curCityTitle+this.carNo);
        }else{
          params.append('form.vin',this.carVin);
        }
        this.$axios({
          method: 'post',
          url:'gp/app/vehicleApp!checkVehicle.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true && res.data.statusCode==200){
          console.log(res,111)
          this.$router.push({path:'/product-list',query: {carModel:res.data.object.carQuery,id:res.data.object.carModelId}})
        }else{

          var params = new URLSearchParams();
          params.append('form.carNo',this.curCityTitle+this.carNo);
          params.append('form.plateFormFlag','0101');
          this.$axios({
            method: 'post',
            url:'gp/app/vehicleApp!checkVehicle.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true && res.data.statusCode==200){
            this.$router.push({path:'/product-list',query: {carModel:res.data.object.carQuery,id:res.data.object.carModelId}})

          }else{
            this.$router.push({path:'/report-center'})


          }
        })
        }
      })
      },
      /**选择车牌地区**/
      handleSelectCity(data){
        this.curCityTitle=data;
        this.popupSelectCity=false;
      }
    }
  }
</script>


<style>
  .add_bg_car{
    background:url("../../../assets/img/bg-car.jpg") no-repeat;
    background-size: cover;
  }
  .app-carmodel-search{
    padding:100px 16px 0;
  }
  .app-carmodel-search .button-content .mint-button{
    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    display: block;
    width: 100%;
    font-size: 16px;
  }
  .app-carmodel-search .module-form{
    background:rgba(255,255,255,0.2);
    padding:30px 20px 36px;
    border-radius: 6px;
  }
  .app-carmodel-search .input-content .mint-cell{
    background: #fff;
    border-radius: 5px;
    position: relative;
    margin:0 0 18px;
    height: 47px;
    min-height: 47px;
    /*padding: 0 0 6px;*/
    border: 1px solid #fff;
    transition: all .3s;
    overflow: inherit;
  }
  .app-carmodel-search .input-content .mint-field-core{
    font-size: 15px;
  }
  .app-carmodel-search .input-content .mint-cell-title{
    width:56px;
    font-size: 15px;
  }
  .app-carmodel-search .input-content .mint-cell-wrapper{
    background:none;
    padding: 0 10px;
    overflow: inherit;
  }
  .app-carmodel-search .none-tips{
    padding:26px 0 0;
    text-align: right;
    font-size: 16px;
    color: #fff;
  }
  .app-carmodel-search .none-tips a{
    color: #fff;
  }

  .app-carmodel-search .input-content .mint-cell.active{
    box-shadow: 0 0 10px 4px rgba(255,255,255,0.5);
    border: 1px solid #03adf3;
  }
  .app-carmodel-search .module-show-img img{
    display: block;
    margin:0 auto;
    height: 100px;
  }
  .app-carmodel-search .input-car-no .mint-cell-value{
    position: relative;
    padding-right: 24px;
    flex-direction: row-reverse;
}
  .app-carmodel-search .input-car-no .car-no-area{
    display: inline-block;
    font-size: 16px;
    width: 36px;
  }
  .app-carmodel-search .input-car-no .car-no-area:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    border-top: 4px solid #333;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

  }
  .app-carmodel-search .input-car-no .mint-field-clear{
    display: none !important;
  }
  .app-carmodel-search .input-block .mint-field-other{
    position: initial;
    height: 46px;
    line-height: 46px;
  }
  .app-carmodel-search .input-car-no .icon-xiangjizhuanhuan{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
    color: #666;
    padding-left: 4px;
  }
  .app-carmodel-search .modal-car-city{
    width: 100%;
  }
  .app-carmodel-search .input-block{
    position: relative;
  }
  .app-carmodel-search .module-select-list{
    background: #fff;
    position: absolute;
    top: 46px;
    left:22px;
    right: -10px;
    z-index:1000;
    max-height: 200px;
    overflow: auto;
  }
  .app-carmodel-search .module-select-list.module-select-list-vin{
    left: 0;
    right: 0;
  }
  .app-carmodel-search .module-select-list .select-item{
    padding:0 12px;
    line-height: 34px;
    color: #333;
    font-size: 14px;
    border-bottom:1px solid #eee;
  }
  .app-carmodel-search .module-select-list span{
    float: right;
    color: #888;
  }
</style>

